import { Card, List, Space, Tag, Tooltip, Typography } from "antd";
import Image from "@/components/Image";
import { completeImgUrl } from "common/utils/utils";
import { Link, useModel } from "@umijs/max";
import { css } from "@emotion/react";
import NoImage from "@/components/NoImage";
import AddDiffBtn from "@/components/AddDiffBtn";
import { DiffOutlined, LinkOutlined, PayCircleOutlined } from "@ant-design/icons";
import { Fragment } from "react";
import { SpecificationValueType } from "common/utils/data";
import Rate from "@/components/Rate";

export default function Item({
  item,
}: {
  item: API.EvaluationIndexResult,
}) {
  const {
    mapData: mapSpecification,
  } = useModel('specification');

  return <Link to={{
    pathname: `/evaluation/${item.uuid}`
  }} target="_blank">
    <List.Item
      className="cursor-pointer"
    >
      <Card hoverable bordered={false} actions={[
        <AddDiffBtn key="add-diff" evaluationUuid={item.uuid}>
          <Space className="hover-primary" style={{
            color: 'rgba(0, 0, 0, 0.88)'
          }}>
            <DiffOutlined />
            <span>添加对比</span>
          </Space>
        </AddDiffBtn>,
        <a className="hover-primary" style={{
          color: 'rgba(0, 0, 0, 0.88)'
        }} href={item.buyUrl} target="_blank">
          <Space>
            <LinkOutlined />
            <span>去购买</span>
          </Space>
        </a>

      ]} styles={{
        body: {
          padding: 16
        }
      }} cover={
        item.article.thumbnails?.length ? <Image
          style={{
            width: '100%',
            aspectRatio: '2/1',
          }}
          alt={item.article.thumbnails[0]}
          src={completeImgUrl(item.article.thumbnails[0], '?x-oss-process=image/resize,m_fill,w_340,h_170')}
        /> : <NoImage style={{
          width: '100%',
          aspectRatio: '2/1',
        }} />
      }>
        <Card.Meta
          title={<Tooltip title={item.title}>
            <span className="truncate inline-block max-w-full">{item.title}</span>
          </Tooltip>}
          description={
            <Fragment>
              <div className="overflow-hidden" style={{ height: 90 }} css={css`
             &>.ant-tag{
               margin-bottom: 8px;
             }
            `}>
                <Rate.Tag bizUuid={item.uuid} />
                <Tag color="volcano" bordered={false}>{item.brand.title}</Tag>
                {item.price !== null ? <Tag icon={<span>￥</span>} color="var(--primary-color)" bordered={false}>{item.price}</Tag> :
                  <Tag color="var(--primary-color)" bordered={false}>价格未公布</Tag>
                }
                {mapSpecification && item.specifications.map(spec => {
                  const cur = mapSpecification[spec.specificationUuid];
                  if (cur) {
                    return <Tag key={spec.uuid}>
                      {cur?.name}：{
                        cur.valueType === SpecificationValueType.SELECT ?
                          spec.value.split(';').filter(item => item).map(item => {
                            return cur.extra?.mapOptions?.[item];
                          }).join('、') :
                          spec.value
                      }
                    </Tag>
                  }
                  return <Fragment key={spec.uuid} />
                })}
                {item.article.keywords.map(keyword => {
                  return <Tag key={keyword}>{keyword}</Tag>
                })}
              </div>
            </Fragment>
          }
        />
      </Card>
    </List.Item>
  </Link>
}
